<template>
	<div class="index-box" ref="index">
		<el-row :gutter="10">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<div class="search" ref="search">
					<el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
						class="demo-form-inline" id="searchBox">
						<el-form-item prop="searchKey">
							<el-input v-model="searchForm.searchKey" clearable placeholder="内容"></el-input>
						</el-form-item>
            <el-form-item prop="auditStatus">
            	<el-select v-model="searchForm.auditStatus" placeholder="请选择审核状态">
                <el-option label="待审核" value="1"></el-option>
                <el-option label="通过" value="2"></el-option>
                <el-option label="驳回" value="3"></el-option>
              </el-select>
            </el-form-item>


						<el-form-item class="clearfix">
							<el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
							<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
						</el-form-item>
					</el-form>
				</div>

				<div class="table" ref="table">
					<el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight"
						v-loading="loading" @selection-change="handleSelectionChange"
						@sort-change="handleTablechangeSort" stripe
						>

						<el-table-column prop="name" label="用户头像"
							align="center" width="180">
							<template #default="scope">
								<el-image :src="scope.row.userface" fit="fill" v-image-preview class="img"></el-image>
							</template>
						</el-table-column>
						<el-table-column prop="nickname" label="用户昵称" width="180">
						</el-table-column>
						<el-table-column prop="content" label="内容"  align="left">
						</el-table-column>
            <el-table-column prop="markupRate" label="图片/视频" align="center" >
              <template slot-scope="scope">
                <div style="display: flex;">
                  <div v-for="item in scope.row.imgArr">
                    <el-image :src="item.img" fit="fill" v-image-preview style="width: 100px;margin-right:10px" v-if="item.type=='image'" ></el-image>
                    <!-- <img :src="item.img" alt="" style="width: 100px;margin-right:10px"  /> -->
                    <video :src="item.img" controls style="width: 100px;height: 130px;margin-right:10px" v-else ></video>
                  </div>
                </div>


              </template>
            </el-table-column>
						<el-table-column prop="postTime" label="发布时间" width="190" align="center"></el-table-column>

						<el-table-column prop="markupRate" label="审核状态" align="center" width="180">
							<template slot-scope="scope">
								<div>
									<el-tag
										:type="scope.row.auditStatus=='1'?'primary':scope.row.auditStatus=='2'?'success':'warning'">
										{{scope.row.auditStatus=='1'?'待审核':scope.row.auditStatus=='2'?'通过':'驳回'}}
									</el-tag>
								</div>

							</template>
						</el-table-column>


						<el-table-column prop="name" label="操作" width="200" align="center" fixed="right">
							<template #default="scope">

								<el-button v-if="scope.row.auditStatus=='1'" size="medium"
									type="text" icon="el-icon-document-checked" @click="handleAudit(scope.row)">审核</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="page" ref="page">
					<MyPagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
						@pagination="dataInfo" />
				</div>
			</el-col>
		</el-row>

		<!-- 商家审核	 -->
		<el-dialog title="商家审核" width="800px" :close-on-click-modal="false" v-dialogDrag :visible.sync="auditVisible"
			@close="auditVisible = false">
			<el-form id="userDialog" :model="user" label-position="right" :rules="rules" ref="user">
				<el-form-item label="审核:" prop="auditResult" label-width="125px" style="width:100%">
					<el-radio-group v-model="user.auditResult">
						<el-radio label="2">通过</el-radio>
						<el-radio label="3">驳回</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="auditVisible = false" size="small">取 消</el-button>
				<el-button type="primary" @click="storeAuditSubmit('user')" size="small" :loading="btnLoading">确 定
				</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import common from '@/api/api';
	import {
		getFriendCirclePosts, auditPost
	} from '@/api/getData'
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import option from '../../common/option.js';

	export default {
		components: {
			Treeselect
		},
		data() {
			let that = this;
			return {
				sta: true,
				loading: false,
				btnLoading: false,
				userVisible: false,
				time: [],
				auditTime: [],
				statusList: [],
				searchForm: {
					auditStatus: "",
          searchKey:'',
					pageNum: 1,
					pageSize: 20,
				},
				storeList: [],
				tableColumn: [],
				hideTableColumn: [],
				/*自定义表格列需要隐藏的*/
				tableColumnType: 'staffManagement',
				/*自定义表格列类型传参*/
				tableHeight: 0, //table 高度
				statusRow: {},
				dataList: [],
				total: 0,
				multipleSelection: '',
				dialogTitle: '',

				yesVisible: false,

				userList: [],
				auditVisible: false,
				user: {
					postId: '',
					auditResult: ''
				},
				rules: {
					auditResult: [{
						required: true,
						message: '请选择是否审核通过',
						trigger: 'blur'
					}],
				},
				areaProps: {
					/*地址加载*/
					lazy: true,
					checkStrictly: true,
					lazyLoad(node, resolve) {
						that.$axios({
							method: 'get',
							url: common.apihost + '/system/area/getList?pcode=' + (node.value ? node.value : '0'),
						}).then((res) => {
							if (res.data.code == 200) {
								const nodes = res.data.data;
								nodes.forEach(item => {
									item.value = item.code,
										item.label = item.name,
										item.leaf = item.level >= 5
								})
								resolve(nodes);
							} else {
								this.$message.error(res.msg)
							}
						})
					}
				},
				levelList: [],
				sys_audit_status: []
			}
		},
		computed: {
			pickerOptions: () => {
				return option.pickerOptions;
			}
		},
		created() {
		},
		mounted() {
			this.dataInfo();
			this.$nextTick(() => {
				this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight  - this.$refs.page.offsetHeight - 55;
			})
		},
		methods: {
			resetQuery() {
				this.time = [];
				this.auditTime = [];
				this.resetForm('searchForm');
				this.dataInfo();
			},
			handleSearch() {
				this.page = 1;
				this.dataInfo();
			},
			handleEdit(row) {
				this.$router.push({
					path: '/user/applyStoreNew',
					query: {
						storeId: row.storeId,
						type: 'edit',
						customerId: row.customerStoreId,
						entrance: 'audit'
					}
				});
			},
			handleView(row) {
        console.log(row.storeApplyId)
				this.$router.push({
					path: '/user/applyStoreNew',
					query: {
						storeId: row.storeApplyId,
						type: 'detail'
					}
				});
			},
			normalizer(node) {
				if (node.children && !node.children.length) {
					delete node.children;
				}
				return {
					id: node.categoryId,
					label: node.name,
					children: node.children
				};
			},
			async dataInfo() {
				try {

					this.loading = true;
					const result = await getFriendCirclePosts(this.searchForm);
					if (result.code == 200) {
						this.total = result.total;
						//this.dataList = result.rows;
            let list = result.rows;
            for(let i=0;i<list.length;i++){
              let arr = list[i].imagePath.length?list[i].imagePath.split(','):[];
              let obj = [];
              for(let i=0;i<arr.length;i++){
                obj.push({
                  img:arr[i],
                  type:this.checkMediaType(arr[i])
                })
              }
              list[i].imgArr = obj;
            }
            this.dataList = list
            console.log(this.dataList)
					} else {
						this.$message.error(result.msg);
					}
					this.loading = false;
				} catch (err) {
					this.loading = false;
					console.log(err)
				}
			},
      checkMediaType(url) {
        // 创建URL对象
        var link = new URL(url);

        // 获取路径部分（去除参数）
        var path = link.pathname;

        // 获取路径的最后一个点之后的内容作为文件扩展名
        var extension = path.split('.').pop().toLowerCase();

        // 声明支持的图片和视频文件扩展名
        var imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
        var videoExtensions = ['mp4', 'wmv', 'avi', 'mov'];

        // 判断文件扩展名是否在图片扩展名数组中
        if (imageExtensions.includes(extension)) {
          return 'image';
        }

        // 判断文件扩展名是否在视频扩展名数组中
        if (videoExtensions.includes(extension)) {
          return 'video';
        }

        // 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
        return null;
      },
			/** 表格排序 **/
			handleTablechangeSort(column, prop, order) {
				this.searchForm.orderByColumn = column.prop;
				this.searchForm.isAsc = column.order;
				this.dataInfo();
			},
			/** 认证信息 **/
			handleAuthentication(row) {
				row.contractPic = row.contractPic.split(',');
				this.statusRow = row;
				this.yesVisible = true;
			},
			/** 商家审核按钮点击 **/
			handleAudit(row) {
				this.user.postId = row.postId;
				this.user.markupRate = '';
				this.auditVisible = true;
			},
			/** 商家审核提交 **/
			storeAuditSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.btnLoading = true;
						auditPost(this.user).then((result) => {
							if (result.code == 200) {
								this.$message.success(result.msg);
								this.auditVisible = false;
								this.dataInfo();
							} else {
								this.$message.error(result.msg);
							}
							this.btnLoading = false;
						});
					}
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},

		}
	}
</script>

<style scoped lang="scss">
	.searchAddress /deep/ .el-input {
		width: 350px !important;
	}

	.el-table .el-dropdown-link {
		cursor: pointer;
		color: #61997A;
		margin-left: 5px;
	}

	.leftDialog {
		height: 540px;
		overflow-y: auto;
	}

	.activeVerticalBox .activeItem {
		color: #61997A;
		cursor: pointer;
		margin: 0px;
		text-align: center;
		height: 20px;
		line-height: 20px;
	}

	.activeVerticalBox .el-dropdown {
		display: flex;
		justify-content: center;
		color: #61997A;
		cursor: pointer;
	}

	.activeCheckedBox {
		border-top: 1px solid #ddd;
		padding: 10px;
		height: 52px;

		.el-tag {
			margin-right: 10px;
		}
	}

	.rateBox /deep/ .el-rate__icon {
		margin-right: 0px;
	}

	.rateBox>p {
		margin: 0px;
	}

	.rateBox>p>/deep/ .el-rate {
		height: 25px;
		line-height: 25px;
		display: flex;
	}

	.rateBox>p>/deep/ .el-rate .el-rate__item {
		display: flex;
		align-items: center;
	}

	.rateBox .rateText {
		width: 60px;
	}

	.rateBox .content {
		display: flex;
	}

	.rateBox .el-tooltip {
		width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
</style>
